<script setup>
const props = defineProps(["menus"])
const drawer = ref(false);
</script>
<template>
  <div class="lg:hidden flex items-center justify-between w-[100%]">
      <!-- mobile  header -->
      <div class="w-4rem flex justify-center items-center">
        <Icon @click="drawer = true" name="iconoir:menu" size="2rem" color="#000" />
      </div>
      <NuxtLink to="/" class="w-[8rem] self-center"><img style="width: 200px" src="/assets/images/logo.png"
          alt="logo" />
      </NuxtLink>
      <div class="w-4rem flex justify-center items-center">
        <Icon name="material-symbols:search" size="2rem" color="#000" />
      </div>
    </div>
    <client-only>
      <el-drawer custom-class="p-0" v-model="drawer" title="I am the title" :with-header="false" direction="ltr">
        <el-menu default-active="2" class="border-0" style="border: 0">
          <el-menu-item class="text-center" :index="item.path" v-for="(item, index) in props.menus" :key="item.path">
            <!-- {{ item.name }} -->
            <NuxtLink :to="item.path" class="hover:text-primary-600 dark:text-primary-200">{{ item.name }}</NuxtLink>
          </el-menu-item>
        </el-menu>
      </el-drawer>
    </client-only>
</template>
